function getScor() {
    axios.get('/score/list').then(({data:res}) => {
        console.log(res);
        const { code, data, message } = res
        // 首先明确 data是一个对象,直接对对象进行遍历渲染，不用想那么多数据变换
        let  str =''
        for (let k in data) {
            str+= `<tr>
        <th scope="row">${k}</th>
        <td>${data[k].name}</td>
        <td class="score" data-id=${k} data-batch='1'>${data[k].score[0]}</td>
        <td class="score" data-id=${k} data-batch='2'>${data[k].score[1]}</td>
        <td class="score" data-id=${k} data-batch='3'>${data[k].score[2]}</td>
        <td class="score" data-id=${k} data-batch='4'>${data[k].score[3]}</td>
        <td class="score" data-id=${k} data-batch='5'>${data[k].score[4]}</td>
      </tr>`
        } 
        document.querySelector('tbody').innerHTML=str  
    })
}
getScor()
// 渲染函数已经写出，接下来修改和录入，核心思想是点击一下，生成一个input 标签，由于axios请求是异步的
// 所以要针对tbody写事件监听
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.tagName === 'TD'&&e.target.className==='score') {
        // console.dir(e.target);
        let m = e.target.children[0]?.value || e.target.innerHTML
        // 这个可选链操作符真好用，就是要注意一下，直接找标签找不到，要用.children[0],因为他是异步的，所以，代码的执行顺序，一定要透彻
        let td=e.target
        td.innerHTML = `<input type="text">`
        td.children[0].value = m
        td.children[0].focus()
        const id = e.target.dataset.id
        const batch = e.target.dataset.batch

        // 
        // 解构赋值对e.啥啥啥不好使
        e.target.children[0].addEventListener('blur', function(){
    
            const bodyData = {
                    stu_id:id,
                    batch,
                    score: this.value
            }
    //    数据准备好后，发送
            axios.post('/score/entry', bodyData).then(({data:res}) => {
                // console.log(res);
                if(res.code===0) td.innerHTML=this.value
                
            })
        })
        //  再来一个键盘弹起事件  这个应该还有简便方法，企业中肯定用最简便的
        e.target.children[0].addEventListener('keyup', function (e) { 
            if (e.key === "Enter") {
               const bodyData = {
                    stu_id:id,
                    batch,
                    score: this.value
            }
    //    数据准备好后，发送
            axios.post('/score/entry', bodyData).then(({data:res}) => {
                console.log(res);
                if(res.code===0) td.innerHTML=this.value
                
            })
          }
           
        })
    }
})

//   应该还有更简单的方法  但是本大爷现在不想写


